<template>
  <div ref="chartRef" style="width:100%;height:450px"></div>
</template>
<script lang="ts">
  import {defineComponent, onMounted, ref, Ref, unref, watch, watchEffect} from 'vue';
  import {useECharts} from "@/hooks/web/useECharts";


  export default defineComponent({
    props: {
      dataSource: {
        type: Object,
        default: [],
      }
    },
    setup(props) {

      const chartData = ref([]);
      const chartRef = ref<HTMLDivElement | null>(null);
      const {setOptions} = useECharts(chartRef as Ref<HTMLDivElement>);

      watch(() => unref(props).dataSource, () => {
          chartData.value = unref(props).dataSource;
          loadChartDataSetOptions()
        }
      );
      watch(unref(chartData), () => {
        loadChartDataSetOptions()
      });

      function loadChartDataSetOptions() {

        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          legend: generateLegend(),
          xAxis: generatexAxis(),
          yAxis: {
            type: 'value'
          },
          grid: {left: '1%', right: '1%', top: '10%', bottom: 0, containLabel: true},
          series: generateSeries(),
        });
      }


      function generatexAxis(): any {


        function getCatalogData(): any[] {
          let dataArray = [];
          if (unref(chartData)) {
            unref(chartData).forEach(data => {
              dataArray.push(data.chartDate)
            });
          }
          return dataArray
        }

        return {
          type: 'category',
          boundaryGap: false,
          data: getCatalogData(),
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              type: 'solid',
              color: 'rgba(226,226,226,0.5)',
            },
          },
          axisTick: {
            show: false,
          },
        }
      }

      function generateLegend(): any {
        return {
          data: [getDataType()]
        }
      }

      function generateSeries(): any[] {
        let series = [];

        function getDataListByProperName(properName, name) {
          let data = [];
          if (unref(chartData)) {
            unref(chartData).forEach(value => {
              data.push(value[properName])
            });
          }
          return {
            name,
            type: 'line',
            stack: 'Total',
            smooth: true, //这个是把线变成曲线
            data: data
          }
        }

        series.push(getDataListByProperName("chartVal", getDataType()));
        return series
      }

      function getDataType() {
        if (unref(chartData) && unref(chartData).length > 0) {
          switch (unref(chartData)[0].chartType) {
            case "MONTH_ACTIVE":
              return "活跃";
            case "MONTH_REGISTER_PEOPLE":
              return "新增";
            case "arpu":
              return "arpu";
            case "payRate" :
              return "支付率";
            case "arppu":
              return "arppu";
            case "MONTH_RECHARGE_MONEY":
              return "流水";
            default:
              return "未知"
          }
        }
      }

      onMounted(() => {
        chartData.value = unref(props).dataSource;
        loadChartDataSetOptions()
      });

      return {chartRef};
    },
  });
</script>
